<!-- 找回密码 -->
<template>
  <div class="gbpwd">
    <div class="app-header">
      <!-- <span class="left"><i class="back"><</i></span>
      <span class="title">找回密码</span>
      <span class="right"></span> -->
    </div>
    <!-- <x-header :left-options="{backText: ''}">找回密码</x-header> -->
    <top :text="'找回密码'"></top>
    <div style="height: 40px;"></div>
    <div class="group-cell" :class="{active: !next}">
      <div class="cell">
        <label>手机</label>
        <input type="text" placeholder="请输入手机号" v-model="user.username" class="inputSty">
      </div>
      <div class="cell">
        <label>验证码</label>
        <div class="right-verify">
          <input type="text" placeholder="请输入验证码" v-model="user.smscode" class="inputSty">
          <button class="verify" @click="getVerify" style="background: #fff;border:1px solid #fff;outline: none" :disabled="isDisabled">{{verificationCode}}</button>
        </div>
      </div>
      <div class="cell transparent">
        <div class="cbtn" @click="nextStep">下一步</div>
      </div>
    </div>
    <!-- next -->
    <div class="group-cell" :class="{active: next}">
      <div class="cell">
        <label>新密码</label>
        <input type="password" placeholder="请输入6-16个字符" v-model="user.password" class="inputSty">
      </div>
      <div class="cell">
        <label>确认密码</label>
        <input type="password" placeholder="再次输入新密码" v-model="user.passwordConfirm" class="inputSty">
      </div>
      <div class="cell transparent">
        <div class="cbtn" @click="sure">确&nbsp;认</div>
      </div>
    </div>
  </div>
</template>
<script>
  import { sms, forgetPwd } from '../../service/user'
  import { XHeader } from 'vux'
  import http from '../../service/http'
  import util from '../../service/util'
  import tips from '../../service/tips'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        next: false,
        verificationCode: "获取验证码",
        countDown: 60,
        isDisabled: false,
        user: {
          username: '',
          password: '',
          passwordConfirm: '',
          smscode: '',
        }
      }
    },
    mounted() {

    },
    methods: {
      // 获取短信验证码
      async getVerify() {
        this.verificationCode = this.countDown + "s";
        this.countDown = 60;
        var timer = setInterval(() => {
          this.countDown--;
          this.isDisabled = true;
          if (this.countDown <= 1) {
            this.isDisabled = false;
            this.countDown = '再次获取';
            clearInterval(timer);
          }
          if (this.countDown >= 0) {
            this.verificationCode = this.countDown + "s";
          } else {
            this.verificationCode = this.countDown
          }
        }, 1000)
        http.post("/user/sms", {
          username: this.user.username
        }).then((res) => {
          if (res.status == 200) {
            tips.tips("验证码发送成功");
          } else {
            tips.tips("验证码发送失败");
          }
        }).catch((res) => {
          tips.tips(res.msg)
        })
      },
      // 确认
      async sure() {
        const info = await forgetPwd({
          username: this.user.username,
          password: util.md5(this.user.password),
          passwordConfirm: util.md5(this.user.passwordConfirm),
          smscode: this.user.smscode
        })
        if (info.status === 200) {
          util.setItem('login.password', util.md5(this.user.password))
          tips.tips(info.msg);
        } else {
          tips.tips(info.msg);
        }
      },
      // 下一步
      nextStep() {
        if (!this.user.username) {
          tips.tips("请输入手机号");
          return false;
        }
        if (!this.user.smscode) {
          tips.tips("请输入验证码");
          return false;
        }
        http.post("/user/pwdNext", {
          username: this.user.username,
          smscode: this.user.smscode,
        }).then((res) => {
          if (res.data.status == 200) {
            this.next = true
          }
        })
      },
    },
    components: {
      XHeader,
      Top
    },
  }
</script>

<style lang="less">
  body {
    background: #f6f6f6;
  }

  .gbpwd .vux-header {
    background: #fff;
  }

  .gbpwd .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .gbpwd .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .gbpwd .group-cell {
    display: none;
    &.active {
      display: block;
    }
  }

  .gbpwd .inputSty {
    border-style: none;
    outline: none;
  }

  .gbpwd .cbtn {
    text-align: center;
    font-size: 1.42rem;
    color: #ffffff;
    flex: 1;
    padding: 0.7rem 0;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    background-repeat: no-repeat;
    box-shadow: 2px 2px 5px 2px rgba(198, 198, 198, 0.50);
    border-radius: 6px;
  }

  .gbpwd .cell {
    &.transparent {
      background-color: transparent;
      margin-top: 20px;
    }
    label {
      width: 65px;
    }
  }

  .gbpwd .group-cell {
    margin-top: 20px;
  }

  .gbpwd .cell+.cell {
    margin-top: 15px;
  }

  .gbpwd .cell {
    display: flex;
    padding: 0.71rem 15px;
    background-color: #ffffff;
    font-size: 0.92rem;
    .right-verify {
      min-width: 150px;
      position: relative;
      .verify {
        font-size: 0.92rem;
        color: #FEA620;
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0.45rem;
        border: 1px solid #fff;
        background: #fff;
        width: 90px;
        text-align: center;
      }
    }
    label {
      color: #666666;
      margin-bottom: 0;
      align-self: center;
    }
    div,
    input {
      flex: auto;
    }
    input {
      /*color: #CFCFCF;*/
      border: 0;
      padding: 0.35rem;
    }
  }
</style>